import React, { Component } from 'react'
import Type from '../../components/type/Type'
import Echarts1 from '../../components/Echarts1/Echarts1'
import Echarts2 from '../../components/Echarts2/Echarts1'
import Echarts3 from '../../components/Echarts3/Echarts1'

export default class Index extends Component {
  render() {
    return (
      <div className='flex flex-column h-per-100'>
        <div className='flex1  flex' >
          <div className='flex1 m10 shadow flex flex-column'>
            <div className='flex1 flex'>
              <div className='flex1 flex just-center flex-align-center'>
                  <div className='align-center'>
                    <img style={{background: '#e67e22',padding: '10px',borderRadius: '10px'}} width="50" alt='' src={require('./../../assets/1.png')}/>
                    <p className='fw600 fs18 mt5 mb0 color-3'>23,400</p>
                    <p className='fw600 fs12 mt5 mb0 color-ccc' >用户数</p>
                  </div>
              </div>
              <div className='flex1 flex just-center flex-align-center'>
                  <div  className='align-center'>
                    <img style={{background: '#f1c40f',padding: '10px',borderRadius: '10px'}} width="50" alt='' src={require('./../../assets/2.png')}/>
                    <p className='fw600 fs18 mt5 mb0 color-3'>63,400</p>
                    <p className='fw600 fs12 mt5 mb0 color-ccc' >销售额</p>
                  </div>
              </div>
            </div>
            <div className='flex1 flex'>
              <div className='flex1 flex just-center flex-align-center'>
                  <div  className='align-center'>
                    <img style={{background: '#1abc9c',padding: '10px',borderRadius: '10px'}} width="50" alt='' src={require('./../../assets/3.png')}/>
                    <p className='fw600 fs18 mt5 mb0 color-3'>23,400</p>
                    <p className='fw600 fs12 mt5 mb0 color-ccc' >用户数</p>
                  </div>
              </div>
              <div className='flex1 flex just-center flex-align-center'>
                  <div className='align-center'>
                    <img style={{background: '#2ecc71',padding: '10px',borderRadius: '10px'}} width="50" alt='' src={require('./../../assets/4.png')}/>
                    <p className='fw600 fs18 mt5 mb0 color-3'>63,400</p>
                    <p className='fw600 fs12 mt5 mb0 color-ccc' >销售额</p>
                  </div>
              </div>
            </div>
          </div>
          <div className='flex2 m10 shadow'>
            <Echarts1></Echarts1>
          </div>
          
        </div>
        <div className='flex1  flex'>
          <div className='flex1 m10 shadow'>
            <Type></Type>
          </div>
          <div className='flex1 m10 shadow'>
            <Echarts2></Echarts2>
          </div>
          <div className='flex1 m10 shadow'>
            <Echarts3></Echarts3>
          </div>
        </div>
      </div>
    )
  }
}
